<script setup>
  import { ref } from "vue";
  import { bxjVerify } from "@/utils/bxjVerify";

  import { loginAPI } from "@/api/user";
  const { validateEmail, validateField, endVerify } = bxjVerify();
  const form = ref({
    email: "",
    password: "",
  });
  // 提交表单
  const formRef = ref(null);
  const onSubmit = (event) => {
    event.preventDefault();
    if (endVerify(inputRefs, inputs, form)) return;
    //模拟表单提交
    const email = form.value.email; // 替换为实际账号
    const password = form.value.password; // 替换为实际密码
    loginAPI({ email, password })
      .then((res) => {
        // 在这里处理成功的响应
        console.log("登录成功:", res);
      })
      .catch((error) => {
        // 在这里处理错误
        console.error("登录失败:", error);
      });
    // if (
    //   form.value.email === "123456789@qq.com" &&
    //   form.value.password === "123"
    // ) {
    //   //跳转到首页
    //   router.push("/");
    // }
  };
  // 获取子组件的引用数组
  const inputRefs = ref([]);
  // 存储所有输入框的配置
  const inputs = ref([
    {
      name: "email",
      label: "邮箱",
      modelValue: form.value.email, // 将表单的值绑定到这里
      iconClass: "icon-feather-mail",
      type: "email",
      placeholder: "name@example.com",
      failTip: "请输入正确的邮箱", // 绑定按钮触发函数
      onBlurMethod: validateEmail, // 绑定自定义的失去焦点方法
    },
    {
      name: "password",
      label: "密码",
      modelValue: form.value.password, // 将表单的值绑定到这里
      iconClass: "icon-feather-lock",
      type: "password",
      placeholder: "*******",
      onBlurMethod: validateField,
    },
  ]);
</script>
<template>
  <!-- Content
    ================================================== -->
  <div
    uk-height-viewport
    class="uk-flex uk-flex-middle"
  >
    <div class="uk-width-2-3@m uk-width-1-2@s m-auto rounded">
      <div
        class="uk-child-width-1-2@m uk-grid-collapse bg-gradient-warning"
        uk-grid
      >
        <div
          class="uk-margin-auto-vertical uk-text-center uk-animation-scale-up p-3 uk-light"
        >
          <img
            src="@/assets/images/logo-light-icon.png"
            width="45"
            alt=""
          />
          <h1 class="mb-4 mt-2">GoTube</h1>
          <p>The Place You can Share Your Videos.</p>
        </div>

        <!-- column two -->
        <div class="uk-card-default p-6">
          <div class="my-4 uk-text-center">
            <h2 class="mb-0">Welcome back</h2>
            <p class="my-2">Login to manage your account.</p>
          </div>
          <el-form
            :model="form"
            ref="formRef"
          >
            <BxjInput
              v-for="(input, index) in inputs"
              :key="index"
              ref="inputRefs"
              :label="input.label"
              v-model="form[input.name]"
              :iconClass="input.iconClass"
              :placeholder="input.placeholder"
              :half="input.half"
              :failTip="input.failTip"
              :addButton="input.addButton"
              :buttonName="input.buttonName"
              :onButtonMethod="input.onButtonMethod"
              :onBlurMethod="input.onBlurMethod"
            />
            <div
              class="mt-4 uk-flex-middle uk-grid-small"
              uk-grid
            >
              <div class="uk-width-expand@s">
                <p>
                  Dont have account
                  <router-link to="/register">
                    <a href="#"
                      ><span style="text-decoration: underline"
                        >Sign up</span
                      ></a
                    >
                  </router-link>
                </p>
              </div>
              <div class="uk-width-auto@s">
                <button
                  @click="onSubmit"
                  class="BxjButton"
                >
                  Get Started
                </button>
              </div>
            </div>
          </el-form>
        </div>
        <!--  End column two -->
      </div>
    </div>
  </div>
</template>

<style scoped>
  .back {
    background-image: url("https://1img.hitv.com/preview/internettv/sp_images/ott/2018/zongyi/326945/20181029100844197-new.jpg");
  }
  .BxjButton {
    color: #090909;
    padding: 0.7em 1.7em;
    font-size: 16px;
    border-radius: 0.5em;
    background: #e8e8e8;
    cursor: pointer;
    border: 1px solid #e8e8e8;
    transition: all 0.3s;
    box-shadow:
      6px 6px 12px #c5c5c5,
      -6px -6px 12px #ffffff;
  }

  .BxjButton:active {
    color: #666;
    box-shadow:
      inset 4px 4px 12px #c5c5c5,
      inset -4px -4px 12px #ffffff;
  }
</style>
